import React, { FC, useEffect, useState } from "react";
import MyTitle from "../../components/Title";
import { Row, Col, Table, Tag, Button, Popconfirm, Input, Select } from "antd";
import { ajax } from "./../../api/index";
import { connect } from "react-redux";
import { getAnnoList, getAnnoListAsync } from "./../../redux/actions";
import moment from "moment";
import { annoTypeList, roleList } from "../../utils";
import { inject, observer } from "mobx-react";
import uinfo from "../../mobx/uinfo";
import { useNavigate } from "react-router-dom";
const { Option } = Select;
const Annolist: FC<any> = ({ count, dispatch, state }) => {
  const { annoList } = state.data;
  // console.log(annoList);
  const { userInfo } = uinfo;
  useEffect(() => {
    // ajax.annolist()
    // .then(res=>{

    // })
    dispatch(getAnnoListAsync());
  }, []);
  const navigate = useNavigate();
  const [query, setQuery] = useState<any>(null);
  const confirmDel = async (item: any) => {
    console.log(item);
    let { code, result } = await ajax.annodelete({ _id: item._id });
    if (code == 200) {
      // 删除前端
      // dispatch(getAnnoListAsync())
      var list = annoList.filter((v: any) => v._id != item._id);
      dispatch(getAnnoList(list));
    }
  };
  const gotosetanno = (item: any) => {
    navigate("/main/anno/reset/" + item._id);
  };
  const gotodetailanno = (item: any) => {
    navigate("/main/anno/detail/" + item._id);
  };
  // 表头
  const columns: any = [
    {
      title: "序号",
      render: (text: any, item: any, index: any) => {
        return index + 1;
      },
      align: "center",
      width: 80,
    },
    {
      title: "公告标题",
      dataIndex: "title",
      align: "center",
    },
    {
      title: "公告内容",
      dataIndex: "content",
      align: "center",
    },
    {
      title: "发布时间",
      align: "center",
      dataIndex: "time",
      render(value: any, item: any, index: any) {
        return <span> {moment(value).format("YYYY-MM-DD HH:mm")} </span>;
      },
    },
    {
      title: "公告类别",
      align: "center",
      dataIndex: "type",
      render(value: any, item: any, index: any) {
        return (
          <Tag color={annoTypeList.find((item) => item.value == value)?.color}>
            {annoTypeList.find((item) => item.value == value)?.label}
          </Tag>
        );
      },
    },
    {
      title: "发布人",
      align: "center",
      dataIndex: "info",
      render(value: any, item: any, index: any) {
        return <span> {value.username} </span>;
      },
    },
    {
      title: "发布人权限",
      align: "center",
      dataIndex: "info",
      render(value: any, item: any, index: any) {
        return (
          <Tag color={roleList.find((item) => item.value == value.role)?.color}>
            {roleList.find((item) => item.value == value.role)?.label}
          </Tag>
        );
      },
    },
    {
      title: "操作",
      align: "center",
      width: 240,
      render(value: any, item: any, index: any) {
        return (
          <div>
            <Button
              onClick={() => gotodetailanno(item)}
              size="small"
              type="primary"
              style={{ margin: "0 10px" }}
            >
              查看
            </Button>
            {userInfo.role >= item.info.role && (
              <Popconfirm
                title="确定删除吗?"
                onConfirm={() => confirmDel(item)}
                okText="删除"
                cancelText="取消"
              >
                <Button size="small" danger style={{ margin: "0 10px" }}>
                  删除
                </Button>
              </Popconfirm>
            )}
            {userInfo.username == item.info.username && (
              <Button
                onClick={() => gotosetanno(item)}
                size="small"
                type="primary"
              >
                修改
              </Button>
            )}
          </div>
        );
      },
    },
  ];
  const changeKword = (e: any) => {
    console.log(e.target.value);
    setQuery({
      ...query,
      keyword: e.target.value,
    });
  };
  const changeType = (value: any) => {
    console.log(value);
    setQuery({
      ...query,
      type: value,
    });
  };
  const todoSearch = () => {
    dispatch(getAnnoListAsync(query));
  };
  return (
    <div>
      <MyTitle text="公告列表" />
      <Row>
        <Col span={7} offset={1}>
          <Input placeholder="请输入搜索关键字" onChange={changeKword} />
        </Col>
        <Col span={7} offset={1}>
          <Select style={{ width: 220 }} onChange={changeType}>
            {/* <Option value=''>请选择</Option> */}
            {annoTypeList.map((item) => (
              <Option value={item.value} key={item.id}>
                {item.label}
              </Option>
            ))}
          </Select>
        </Col>
        <Col span={7} offset={1}>
          <Button type="primary" onClick={todoSearch}>
            {" "}
            点击搜索{" "}
          </Button>
        </Col>
      </Row>
      <Row style={{ marginTop: 20 }}>
        <Col span={23} offset={1}>
          <Table
            dataSource={annoList}
            columns={columns}
            rowKey={(item: any) => item._id}
            sticky
            bordered
            id="mytable"
            pagination={{ pageSize: 6 }}
          ></Table>
        </Col>
      </Row>
    </div>
  );
};

// inject('uinfo','data')(observer(MyHead))
export default connect(
  // mapStateToProps
  (state: any) => {
    console.log(state);
    return {
      count: state.data.count,
      state,
    };
  }
  // mapDispatchToProps
)(Annolist);

// @inject("uinfo")
// @observer
// @connect()

// inject('uinfo')(observer(connect(
//   // mapStateToProps
//   (state:any)=>{
//     console.log(state)
//     return {
//       count:state.data.count,
//       state
//     }
//   }
//   // mapDispatchToProps
// )(Annolist)))
